<template>
  <div>
    <div class="news-top-title">
      <img class="news-top-icon" src="../assets/imgs/news-top-icon.png" alt="">
      <span class="news-top-text">彩票资讯</span>
    </div>
    <div class="news-bottom-content">
      <div class="news-list-tabs">
        <el-menu class="el-menu-demo" mode="horizontal">
          <el-menu-item index="1" class="my_text_center" v-for="(item,index) in tabsLists" :key="index">
            <span :class="{active:item.status}" class="menu-itme-text" @click="changeTabs(index,item.cate_id)">{{item.tabs}}</span>
            <span class="menu-itme-line"></span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="news-list-title-intro">
        <ul>
          <li v-for="(item,index) in detailsLists" :key="index" class="news-list-item">
            <div class="news-list-title" @click="readAll(index)">
              <p>{{item.title}}</p>
            </div>
            <div class="news-list-time">
              <p>
                <span>{{item.origin}}</span>
                <span>浏览次数：{{item.count}}</span>
                <span>{{item.time}}</span>
              </p>
            </div>
            <div class="news-list-intro">
              <p class="news-intro-p" v-html="item.listContent"></p>
            </div>
            <!-- <div class="news-list-all-btn my_text_right" @click="readAll(index)">
              <span class="my_text_center">阅读全文</span>
            </div> -->
          </li>
        </ul>
        <div class="page-num my_text_center">
          <el-pagination background layout="prev, pager, next" :current-page.sync="currentPage" :page-count="pageCount" prev-text="上一页" next-text="下一页" @current-change="currentChange">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DownloadIcon from "../components/DownloadIcon";

export default {
  components: {
    DownloadIcon
  },
  data() {
    return {
      tabsLists: {},
      detailsLists: [],
      currentPage: 1,
      tabsIndex: 0,
      pageCount: null
    };
  },
  mounted() {
    this.axios
      .all([this.getNews()])
      .then(
        this.axios.spread(newsData => {
          if (newsData.data.status) {
            this.tabsLists = newsData.data.data;
            this.detailsLists = this.tabsLists[0].details;
            this.tabsIndex = this.tabsLists[0].cate_id;
            this.pageCount = this.tabsLists[0].pageCount;
          } else {
            this.log(newsData.data.message);
          }
        })
      )
      .catch(err => {
        this.log(err);
      });
  },
  methods: {
    changeTabs(index, tabsID) {
      this.currentPage = 1;
      this.tabsIndex = this.tabsLists[index].cate_id;
      this.currentChange(this.currentPage);
      this.tabsLists.forEach((ele, i) => {
        if (ele.cate_id == tabsID) {
          ele.status = 1;
          // this.pageCount = this.tabsLists[index].pageCount;
          // this.tabsIndex = this.tabsLists[index].cate_id;
          // this.detailsLists = this.tabsLists[index].details;
        } else {
          ele.status = 0;
        }
      });
    },
    readAll(index) {
      this.$emit("showContentFuc", this.detailsLists[index]);
    },
    currentChange(currentPage) {
      this.axios
        .get("information/getObtainInformationTwoList", {
          params: {
            page: currentPage,
            cate_id: this.tabsIndex
          }
        })
        .then(response => {
          if (response.data.status) {
            this.detailsLists = response.data.data.list;
            this.pageCount = response.data.data.pageCount;
          } else {
            this.log(response.data.message);
          }
        })
        .catch(error => {
          this.log(error);
        });
    },
    getNews() {
      return this.axios.get("information/getObtainInformationOneList");
    }
  }
};
</script>
<style lang="less" scoped>
.news-list-title{
  cursor: pointer;
}
.news-list-title p:hover{
  color: #E52A20;
}
</style>




